const slides = document.querySelectorAll(".slide");
const preButton = document.getElementById("prev");
const nextButton = document.getElementById("next");
const lis = document.querySelectorAll("#circle li")
const length = lis.length;
console.log(lis);
console.log(length);
// 实现点击按钮轮播
nextButton.onclick = function(){
    const current = document.querySelector(".current");
    if(current.nextElementSibling){
        current.nextElementSibling.classList.add("current")
    }else{
        slides[0].classList.add("current")
    }
    setTimeout(()=>{
        current.classList.remove("current")
    })
    updateNextPoint();
}
preButton.onclick = function(){
    const current = document.querySelector(".current");
    if(current.previousElementSibling){
        current.previousElementSibling.classList.add("current")
    }else{
        slides[length-1].classList.add("current")
    }
    setTimeout(()=>{
        current.classList.remove("current")
    })
    updatePrePoint()
}
// 实现自动轮播
 var inttervalId = setInterval(() => {
    const current = document.querySelector(".current");
    if(current.nextElementSibling){
        current.nextElementSibling.classList.add("current")
    }else{
        slides[0].classList.add("current")
    }
    setTimeout(()=>{
        current.classList.remove("current")
    })
    updateNextPoint()
}, 3000);
//实现原点的更新
function updateNextPoint(){
    const active = document.querySelector(".active");
    if(active.nextElementSibling){
        active.nextElementSibling.classList.add("active")
    }else{
        lis[0].classList.add("active")
    }
    setTimeout(()=>{
        active.classList.remove("active")
    })
}
function updatePrePoint(){
    const active = document.querySelector(".active");
    if(active.previousElementSibling){
        active.previousElementSibling.classList.add("active")
    }else{
        lis[length-1].classList.add("active")
    }
    setTimeout(()=>{
        active.classList.remove("active")
    })
}
//实现点击原点更新图片
// 给所有的原点绑定事件
for(let i =0;i<length;i++){
    lis[i].onclick = function(){
        const active = document.querySelector(".active");
        const current = document.querySelector(".current");
        lis[i].classList.add("active");
        slides[i].classList.add("current");
        current.classList.remove("current")
        active.classList.remove("active");
    }
}
